<template>
  <div class="person">
    <h2>当水温超过50度，或者水位达到50厘米，给服务器发个请求</h2>
    <h2>当前水温：{{ waterTemp }}度</h2>
    <h2>当前水位：{{ waterHeight }}厘米</h2>
    <button @click="changeTemp">水温变化</button>
    <button @click="changeHeight">水位变化</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

const waterTemp = ref(0)
const waterHeight = ref(0)

function changeTemp() {
  waterTemp.value += 10
}
function changeHeight() {
  waterHeight.value += 10
}

// watch写法（数据较少的时候还好，数据多的时候是在麻烦，不推荐）
// watch([waterTemp, waterHeight], (value) => {
//   const [newTemp, newHeight] = value
//   if (newTemp >= 50 || newHeight >= 50) {
//     console.log('当水温超过50度，或者水位达到50厘米，给服务器发个请求', newTemp, newHeight)
//   }
// })

// watchEffect写法，他会立即运行函数，全自动监视，在依赖更改的时候重新执行该函数，他会自动分析监控那些数据，数据量大的时候推荐使用
watchEffect(() => {
  console.log('立即监视，类似于 watch+deep+immediate 的结合')
  if (waterTemp.value >= 50 || waterHeight.value >= 50) {
    console.log('当水温超过50度，或者水位达到50厘米，给服务器发个请求', waterTemp, waterHeight)
  }
})

// watch和 watchEffect 的异同
// 都能监听到响应式数据的变化，不同的是监听数据变化的方式不同
// watch:要明确监视的响应式数据
// watchEffect：不需要明确指出监视的数据，函数中用到那些属性，那就监视那些属性
</script>

<style scoped>
.person {
  width: 700px;
  height: 240px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
